/**
 * Created by tom on 5/31/17.
 */
/**
 *
 *
 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
 var box=document.getElementById('box');         // 获取元素

 alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

 alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

 alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

 alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

 视口：viewport(理想视口)
 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
 inital-scale=1.0(可以和device-width起到相同的效果，可以让理想视窗设置为设备的实际宽度，由于兼容问题两者必须都要写)
 user-scalable=no(禁止缩放)
 width=device-width(设备的实际宽度)
 minimum-scale=1.0（最小缩放比例）
 maximum-scale=1.0 （最大缩放比例）


 DPR:像素比=物理像素/css像素。

 设备像素，（屏幕分辨率，物理像素）
 是显示屏能够控制的最小显示单位.

 css像素=设备独立像素
 就是css上用的像素: border: 1px solid black; 它是web编程抽象的概念,不存在的, 它独立于设备, 用于在逻辑上衡量像素

 设备独立像素(就是像素)
 也叫密度无关像素
 用于独立于设备,用于逻辑上衡量像素的单位, 也就是css像素, 可转换为物理像素。通过DPR修改
 所以说，物理像素和设备独立像素之间存在着一定的对应关系。

 PPI
 像素密度（pixel density）.
 全称是（pixel per inch）就是每英寸内有多少个设备像素点.
 PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。
 标准的PPI是160, 不过现在屏幕标准的少了, 都超过了160.
 PPI 值超过300的叫做超高密度屏幕，Apple 给它换了个高大尚的名称：Retina视网膜屏幕
 Iphone 5s 设备像素比为2


 移动端常用布局：
 1. 流式布局 和设备等宽，通过百分比做到自适应
 2. rem 做盒子的宽度，viewport缩放
 3. 固定宽度 viewport缩放（改变inital-scale的值）
    eg:    var fixW=150;
     var screenW=window.screen.width;
     var scale=screenW/fixW;
     var meta=document.createElement("meta");
     meta.setAttribute("name","viewport");
     meta.setAttribute("content","width="+fixW+",initial-scale="+scale+"")
     document.getElementsByTagName("head")[0].appendChild(meta);
 4. vw/vh 相对于viewport理想视窗(设备）的比例   兼容性不好
    1vw=10%设备宽

 meta标签大全
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 IE=edge 浏览器显示方式：以最高版本显示
 chrome=1 以谷歌浏览器模式渲染

 <!-- 页面描述 -->
 <meta name="description" content="不超过150个字符"/>

 <!-- 页面关键词 -->
 <meta name="keywords" content=""/>

 <!-- 网页作者 -->
 <meta name="author" content="name, email@gmail.com"/>

 <!-- 搜索引擎抓取 -->
 <meta name="robots" content="index,follow"/>

 格式检测：忽略页面中的电话号码，邮箱的识别
 <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
 <meta name="format-detection" content="telphone=no, email=no，address=no"/>

 <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
 <meta name="apple-mobile-web-app-title" content="yes">

 <!-- 启用360浏览器的极速模式(webkit) -->
 <meta name="renderer" content="webkit">
 * */